{extends file="../home.html"}
{block name="title"}{$head_title}{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<link href="__PUBLIC__/Css/front/css/sama_index.css?version={$version}" type="text/css" rel="stylesheet">
<style type="text/css">
body{
	background: #F3F3F3;
}

	/*消息抖动start*/
	@keyframes move{
		0%{
			top: 0;
		}
		100%{
			top: 10px;
		}
	}
	@-webkit-keyframes move{
		0%{
			top: 0;
		}
		100%{
			top: 10px;
		}
	}
/*消息抖动end*/
/*推荐用户start*/
	.top_tip {
		display: inline-block;
		float: right;
	}

	.top_tip > span {
		border: 1px solid #FF6600;
		color: #FF6600;
		font-size: 0.7rem;
		padding: 0.15rem 0.5rem;
	}

	 .user_top {
		 white-space: nowrap;
		 overflow: hidden;
		 overflow-x: scroll;
		 -webkit-overflow-scrolling: touch;
	 }

	.user_top_box {
		width: 33%;
		display: inline-block;
		text-align: center;
		border: 1px solid #EFEFEF;
		border-radius: 10px;
		padding: 15px 5px;
		box-shadow: 5px 5px 5px #EFEFEF;
	}

	.user_top_box > img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.user_top_box > p {
		color: #323232;
		font-size: 0.8rem;
		margin-bottom: 10px;
	}

	.user_top_box > .add_concern {
		background: #FF6600;
		border-radius: 5px;
		color:#fff;
		font-size: 0.6rem;
		padding: 5px 20px;
	}

	.concern {
		background: #ffffff;
		border-radius: 5px;
		color: #FF6600;
		font-size: 0.6rem;
		padding: 5px 20px;
		border: 1px solid #FF6600;
	}
/*推荐用户end*/

</style>
{/block}
{block name="content"}

	
<div class="com_header">
	Sama<a href="/FrontIndex/search" class="search native_go"><i class="icon_search"></i></a><a href="/FrontIndex/message_center" class="msg native_go"><i class="icon_msg"></i>{if $is_read}<span class="dot"></span>{/if}</a>
</div>

<div id="load_wrapper">
	<div id="scroller">
		<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>
			<!-- 轮播图 -->
		    <div class="swiper-container home_banner">
		        <div class="swiper-wrapper">
		        	{foreach from=$cust_flash_list item=v}
		            <div class="swiper-slide">
		                <a href="{$v.link}" class="native_go"><img src="/Public/Images/img/no-img.png" alt="Photo" data-src="{$v.pic}?imageMogr2/auto-orient/imageslim"></a>
		            </div>
		            {/foreach}
		        </div>
		        <!-- 如果需要分页器 -->
		        <div class="swiper-pagination"></div>
		    </div>

			<div class="home_nav">
				{foreach from = $channel_list item = this}
				<a href="/FrontChannel/post_list/channel_id/{$this.channel_id}" class="native_go">
					<img src="/Public/Images/img/no-img.png" alt="Photo" data-src="{$this.icon}?imageMogr2/auto-orient/imageslim">
					<p>{$this.channel_name}</p>
				</a>
				{/foreach}
			</div>

		{$i = 10}


		<div class="home_list">
				<!-- su 首页推荐人 start-->
				{if $user_info != null}
				<div class="home_item">
					<div class="user_info clearfix" style="margin-bottom:10px;">
						<div  class="avatar native_go" style="margin-right: 0.5rem;">
							<img alt="photo" src="/Public/Images/common/sama.png">
						</div>
						<div class="user_cont" style="display: inline-block; margin-left: 0;">
							<a class="nickname native_go" href="/FrontUserCenter/others_space/user_id/62202">官方娘推荐</a>
						</div>
						<div class="top_tip">
							<span>推荐</span>
						</div>
					</div>


					<div class="user_top">
						{foreach from=$user_info item=v }

						<div class="user_top_box">
							<a href="/FrontUserCenter/others_space/user_id/{$v.user_id}" class="avatar native_go " >
							<img src="/Public/Images/img/no-img.png" alt="" style="border-radius:50%; width: 60%" data-src="{$v.headimgurl}?imageView2/1/w/200/h/200/imageslim">
							</a>
							<p>{$v.nickname}</p>
							<!--{if $v.subscribe == 0}-->
							<!--<span class="add_concern concernte" data-value="{$v.user_id}" >关注</span>-->
							<!--{else}-->
							<!--<span class="concern concernte" data-value="{$v.user_id}" >已关注</span>-->
							<!--{/if}-->
						</div>
						{/foreach}
					</div>
				</div>
				<!-- su 首页推荐人 end-->
				{else}

				{/if}


				<!-- wangtao 首页信息流 2017.9.18 start-->
			{foreach from=$post_list item=v key=kes}

				{if ($kes+1)%10 == 0}
				{if $post_list[$i++]['pic'] != null}
				<div class="home_item" >
						<div class="user_info clearfix" style="margin-bottom: 5px;">
							<div  class="avatar native_go" style="margin-right: 0.5rem;">
								<img alt="photo" src="/Public/Images/common/sama.png">
							</div>
							<div class="user_cont" style="display: inline-block; margin-left: 0;">
								<a class="nickname native_go">官方娘推荐</a>
							</div>
							<div style="display: inline-block; float: right;">
								<span style="border: 1px solid #FF6600; color: #FF6600; font-size: 0.7rem; padding: 0.15rem 0.5rem;">推荐</span>
							</div>
						</div>
						<div class="native_go">
							<div class="swiper-slide" style="height: 227.8px">
								<a href="{$post_list[$i]['link']}">
								<img  src="/Public/Images/img/no-img.png" alt="Photo" data-src="{$post_list[$i++]['pic']}?imageMogr2/auto-orient/imageslim">
								</a>
							</div>
						</div>
						{if $i>=12}
						{$i= 10}
						{/if}
				</div>
				{/if}
				{else}
				{/if}

				{if $kes > 9}
				{break}
				{/if}
				<!-- wangtao 首页信息流 2017.9.18 end-->
				<div class="home_item">
					<div class="user_info clearfix">
						<a href="/FrontUserCenter/others_space/user_id/{$v.user_id}" class="avatar native_go">
							<img src="/Public/Images/img/no-img.png" alt="" data-src="{$v.post_user.headimgurl}?imageView2/1/w/200/h/200/imageslim">
						</a>
						<div class="user_cont">
							<a class="nickname native_go" href="/FrontUserCenter/others_space/user_id/{$v.user_id}">{$v.post_user.nickname}</a>
							{foreach from=$v.post_user_title item=title}
							<i class="tag" style="background-color: {$title.title_color}">{$title.title_name}</i>
							{/foreach}
						</div>
					</div>
					<!-- 点击文字和图片跳转到详情页 -->
					<a href="/FrontChannel/post_detail/post_id/{$v.post_id}" class="native_go">
						<div class="item_title">
							{$v.title}
						</div>
						<div class="item_desc">
							{$v.content}
						</div>
						<ul class="imgbox clearfix">
							{foreach from=$v.imgs item=img key=k}
								{if $k < 5}
								<li {if !$img.is_show}class="blur"{/if}>
								<img src="/Public/Images/img/no-img.png" alt="" data-src="{$img.img}?imageView2/1/w/200/h/200/imageslim">
								</li>
								{else}
								<li {if !$img.is_show}class="blur"{/if}>
									<div class="mask">
									<div class="txt">包含共{$v.img_count}张图</div>
									</div>
										<img src="/Public/Images/img/no-img.png" alt="" data-src="{$img.img}?imageView2/1/w/200/h/200/imageslim" alt="">
								</li>
								{/if}
							{/foreach}
						</ul>
						<div class="item_bot clearfix">
							<span class="time fl">{$v.addtime}</span>
							<span class="time fl">{$v.channel_name}</span>
							<span class="time fr">评论 {$v.comment_num}</span>
							<span class="time fr">查看 {$v.clickdot}</span>
						</div>
					</a>
				</div>
			{/foreach}
			</div>

			<div id="pullUp">
				<!-- <span class="pullUpIcon"></span> --><span class="pullUpLabel">上拉加载...</span>
			</div>
		</div>
	</div>


{/block}
{block name="js"}
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/js/lazy-load-img.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/js/index_load.js"></script>
<script>
    var user_id = '';
    var total = parseInt('{$total}');
	var firstRow =  parseInt('{$firstRow}');
    var is_click = false;
</script>
{literal}
<script>

	//懒加载
	var lazyLoadImg = new LazyLoadImg({
        el: document.querySelector('#load_wrapper'),
        mode: 'default', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
        time: 200, // 设置一个检测时间间隔
        complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
        position: { // 只要其中一个位置符合条件，都会触发加载机制
          top: 0, // 元素距离顶部
          right: 0, // 元素距离右边
          bottom: 0, // 元素距离下面
          left: 0 // 元素距离左边
        },
        before: function () { // 图片加载之前执行方法
          
        },
        success: function (el) { // 图片加载成功执行方法
          // el.classList.add('success')
        },
        error: function (el) { // 图片加载失败执行方法
          // el.src = './images/error.png'
        }
    })
    //轮播
	var home_banner = new Swiper('.home_banner',{
        pagination: '.swiper-pagination',
        paginationClickable: true,
        autoplay: 2000,//可选选项，自动滑动
        autoplayDisableOnInteraction : false,
        loop : true,
    })
	//图片正方形
	var imgw = $('.imgbox li').width();
	imgh = $('.imgbox li').height(imgw);
	//安卓行高问题
	if(!is_ios()){
		$('.home_list .tag').css('padding-top','1px');
	}


    //消息抖动start
    window.onload = function() {
        var span = document.querySelectorAll('.dot');
        for(var i = 0; i < span.length; i++){
            span[i].style.WebkitAnimation = span[i].style.animation = " .2s "+(i*50)+"ms move linear infinite alternate";
        }
    };
    //消息抖动end
</script>
{/literal}
{/block}